<template>
	<div id="player" @click="pauses()">
		<img :src="plicp"/>
		<div class="icon" :class="{zt:flag}">
				<i class="iconfont icon-bofang"></i>
		</div>
		<div class="black" :class="{donghua:flag}">
			<div class="pic">
				<img :src="plicp"/>	
				
			</div>
		</div>
		<div class="gename">
			<span class="gewz">{{plicgname}}</span>--<span class="gewz">{{plicname}}</span>
		</div>
		<div class="gechi">
			{{lyric}}
		</div>
		<audio src="" ref="audio"></audio>
		<!--<button class=""><img src="../../public/favicon.ico"/></button> -->
	</div>
</template>

<script>
import axios from "axios";	
export default {
	created(){
//		var that = this;
		 var id= this.$route.query.bfid;
		 console.log(id);
		 axios.get("http://netease.bluej.cn/music/url?id="+id).then( (res)=>{
					console.log(res);
					this.audio.src=res.data.data[0].url;
					this.audio.play();
				}),	
		axios.get("http://netease.bluej.cn/song/detail?ids="+id).then( (res)=>{
					console.log(res);
					this.plicp=res.data.songs[0].al.picUrl;
					this.plicgname=res.data.songs[0].name;
					this.plicname=res.data.songs[0].ar[0].name;
				}),
		axios.get("http://netease.bluej.cn/lyric?id="+id).then( (res)=>{
					console.log(res);
//					console.log(res.data.lrc.lyric);
					this.lyric=res.data.lrc.lyric;
				})
	},		 

	data(){	
		return {
				audio:new Audio(),
				id:"",
				plicp:"",
				plicname:"",
				plicgname:"",
				lyric:"",
				flag:true
				//flase
		}
	},
	destroyed(){
		this.audio.pause();
		this.audio = null;
	},
	methods:{
	pauses(){
 		if(this.flag==true){
 			this.audio.pause();
 			this.flag=false;
 		}else{
 			this.audio.play();
 			this.flag=true;
 		}
			
		}
	}
}
</script>

<style lang="scss">
@keyframes aname{
	0%   {transform: rotateZ(0deg);}
	100% {transform: rotateZ(360deg);}
}

	#player{
		position: absolute;
		top: 0;
		height: 100%;
		text-align: center;
		>img{
			position: absolute;
			z-index: -1;
			width: 100%;
			height: 100%;
			filter: blur(25px);
			left: 0;
		}
		.donghua{
			animation: aname 25s infinite linear;
		}
		.black{
			width: 280px;
			height: 280px;
			border-radius: 50%;
			background: black;
			display:inline-block;
			margin-top: 70px;
			.pic{
				width: 190px;
				height: 190px;
				margin-top: 45px;
				margin-left: 45px;
				img{
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}
		}
		.icon{
				color: white;
				position: absolute;
				margin-left: 165px;
				margin-top: 175px;
				z-index: 1;
				/*display: none;*/
				.icon-bofang{
					font-size: 50px;
				}
			}
			.zt{
				display: none;
			}
		.gename{
			color: white;
			margin-top: 20px;
			.gewz{
				height: 25px;
				line-height: 25px;
				font-size: 16px;
			}
		}
		.gechi{
			width: 210px;
			height: 160px;
			line-height: 40px;
			margin-top: 20px;
			margin-left: 85px;
			overflow: hidden;
		}
	}
</style>